<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>商户管理</cite></a>
        <a><cite>新建商户</cite></a>
    </div>
</div>
<style>
    .xxpayPopupDiv .layui-form-label {
        width:15% !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 33% !important;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-form-pane" enctype="multipart/form-data" type="post" >
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">* </span>商户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="name" name="name" lay-verify="required" placeholder="输入商户名" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">所属代理商</label>
                        <div class="layui-input-inline">
                            <select name="agentId" id="agentId" lay-search="">
		                      <option value="">请选择</option>
		                    </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">* </span>用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="userName" name="userName" lay-verify="required" placeholder="输入用户登录名" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span style="color: red">* </span>手机号</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="mobile" name="mobile" lay-verify="phone" placeholder="输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label"><span style="color: red">* </span>邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" id="email" name="email" lay-verify="email" placeholder="输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="idCard" name="idCard" placeholder="输入身份证号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">QQ号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="qq" name="qq" placeholder="输入QQ号" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">真实姓名</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="realName" name="realName" placeholder="输入真实姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="siteName" name="siteName" placeholder="输入网站名称" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">网站地址</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="siteUrl" name="siteUrl" placeholder="输入网站地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">通讯地址</label>
                        <div class="layui-input-inline">
                            <input type="text" id="address" name="address" placeholder="输入通讯地址" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">唯一标识</label>
                        <div class="layui-input-inline">
                            <input type="text" id="tag" name="tag" placeholder="输入唯一标识" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">线下充值费率(%)</label>
                        <div class="layui-input-inline">
                            <input type="text" id="offRechargeRate" name="offRechargeRate" lay-verify="number" placeholder="输入线下充值费率" autocomplete="off" class="layui-input" value="0">
                        </div>
                        <label class="layui-form-label">商户状态</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="status" value="1" title="启用" checked="checked">
                            <input type="radio" name="status" value="0" title="停止">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">是否上传附件信息</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" id="fileSwitch" lay-skin="switch" lay-filter="fileSwitch">
                        </div>
                        <label class="layui-form-label">商户类型</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="type" value="1" title="平台商户" checked="checked">
                            <!--<input type="radio" name="type" value="2" title="私有商户">-->
                        </div>
                    </div>

                </div>

                <ul class="layui-tab-title uploadFileDIV layui-hide">
                    <li class="layui-this">附件信息</li>
                </ul>
                <div class="layui-tab-content uploadFileDIV layui-hide">

                    <div class="layui-form-item">

                        <label class="layui-form-label"><span class="requiredSpan"> </span>身份证正面</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="1" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan"> </span>身份证反面</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="2" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                    </div>

                    <div class="layui-form-item">

                        <label class="layui-form-label"><span class="requiredSpan"> </span>手持身份证图片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="3" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan"> </span>营业执照图片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="4" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>
                    </div>

                    <div class="layui-form-item">

                        <label class="layui-form-label"><span class="requiredSpan"> </span>税务登记证图片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="5" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan"> </span>考察照片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="6" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan"> </span>商户协议图片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal uploadFileInput" fileType="7" type="hidden" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>
                    </div>

                </div>

                <ul class="layui-tab-title">
                    <li class="layui-this">银行账号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">开户行名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="bankName" name="bankName" placeholder="输入开户行名称" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">开户网点名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="bankNetName" name="bankNetName" placeholder="输入开户网点名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="accountName" name="accountName" placeholder="输入账户名称" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">账户号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="accountNo" name="accountNo" placeholder="输入账户号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开户所在省</label>
                        <div class="layui-input-inline">
                            <input type="text" id="province" name="province" placeholder="输入开户行所在省" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">开户所在市</label>
                        <div class="layui-input-inline">
                            <input type="text" id="city" name="city" placeholder="输入开户行所在市" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <button class="layui-hide xxpayYesBtn" lay-submit lay-filter="mchAdd">保存</button>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'upload'],function(){
        var form = layui.form
        ,$ = layui.$
        ,admin = layui.admin
        ,element = layui.element
        ,layer = layui.layer
        ,upload = layui.upload
        ,setter = layui.setter;

        element.render('breadcrumb', 'breadcrumb');
        
        admin.req({
            type: "POST",
            url: layui.setter.baseUrl + '/agent_info/getParentAgentId',
            success: function(res){
                if(res.code == 0) {
                	var agentList = res.data;
                	//遍历赋值
			        for(var i in agentList){
			        	if(agentList[i].agentLevel == 1){
			            	$("#agentId").append('<option value= '+agentList[i].agentId+'>'+ '[总代理]  ' +agentList[i].agentName +'</option>');
			        	}else if (agentList[i].agentLevel == 2){
			        		$("#agentId").append('<option value= '+agentList[i].agentId+'>'+ '[商户代理]  ' +agentList[i].agentName+'</option>');
			        	}
			        }
			        form.render('select');
                }
            }
        });
        
        form.on('submit(mchAdd)', function(data) {

            if(data.field.type == 2 && data.field.agentId ){
                layer.alert('私有商户不可设置代理商！');
                return false;
            }

            //构造上传文件数组参数
            let uploadFileArray = [];
            for(let i = 0 ; i < $(".uploadFileInput").length; i ++){
                let fileItem = $(".uploadFileInput").eq(i);
                if(fileItem.val()){
                    uploadFileArray.push({"fileType": fileItem.attr('fileType'), "filePath": fileItem.val() });
                }
            }
            data.field.uploadFileArrayStr = JSON.stringify(uploadFileArray);

            //这里可以写ajax方法提交表单
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/mch_info/add',
                data: data.field,
                success: function(res){
                    if(res.code == 0) {
                        layer.alert(res.msg, {title: "提示"}, function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload', {page: {curr: 1}}); //调用业务弹层外表格重新加载
                        });
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //上传图片接口
        var headers = {};
        headers[setter.request.tokenName] = layui.data(setter.tableName)[setter.request.tokenName];
        upload.render({
            url: layui.setter.baseUrl + '/upload/putImg?'+setter.request.tokenName+"="+layui.data(setter.tableName)[setter.request.tokenName]
            , elem: '.uploadImgBtn'
            , headers: headers
            , size: 2048  //仅支持2M图片上传
            ,done: function(res, index, upload){

                //如果上传失败
                if(res.code != 0){
                    return layer.msg('上传失败['+res.msg+']', {icon: 2});
                }
                var divElem = $(this.item).parent();
                divElem.find('.imgVal').val(res.data); //图片真实路径
                divElem.find('.uploadImg').attr("src", res.data).removeClass('layui-hide');
                divElem.find('.delImgBtn').removeClass('layui-hide');
                divElem.find('.uploadImgBtn').text('重新上传');
                form.render();
            }
        });

        //点击[删除图片] 按钮， 事件
        $('.delImgBtn').click(function(){

            var divElem = $(this).parent();
            divElem.find('.imgVal').val(""); //清空图片真实路径
            divElem.find('.uploadImgBtn').text("上传图片");
            divElem.find('.uploadImg').attr("src", "").addClass('layui-hide');
            divElem.find('.delImgBtn').addClass('layui-hide');
            form.render();
        });

        //点击[图片] 按钮， 事件
        $('body').on('click', '.uploadImg', function(){
            var imgSrc = $(this).attr('src');
            layer.photos({photos: {
                    "title": "查看上传图片", //相册标题
                    "id": 1, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [   //相册包含的图片，数组格式
                        {
                            "alt": "图片",
                            "pid": 1, //图片id
                            "src": imgSrc, //原图地址
                            "thumb": "" //缩略图地址
                        }
                    ]
                } ,anim: 5});
        });


        //监听 【是否上传文件附件】 选项
        form.on('switch(fileSwitch)', function(data){

            if(data.elem.checked){ //选择上传

                $('.uploadFileDIV').removeClass('layui-hide');

            }else{  //不上传
                $('.uploadFileDIV').addClass('layui-hide');
            }
        });

        form.render();
    })
</script>